<template>
	<view class="taskCalender">
		<uni-mdnav title="打卡日历"></uni-mdnav>
		<view class="bgBox">
			<image class="bg" src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/personal/defaultBg.jpg"></image>
		</view>
		<view class="tCalender">
			<view class="cMain">
				<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
				<view class="flex alignCenter dotTip font12 color999">
					<view class=""><text class="bgGreen"></text>已完成</view>
					<view class=""><text class="bgOrange"></text>未完成</view>
					<view class=""><text class="bgRed"></text>未打卡</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { myCalendar } from "@/api/mine.js"
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
					year:'',
					month:''
				}
			};
		},
		onLoad() {
			this.year=new Date().getFullYear()
			this.month=new Date().getMonth()+1
			this.getCalendar()
		},
		onReady() {
			
		},
		methods:{
			// 获取日历数据
			getCalendar(){
				let param={
					year:this.year,
					month:this.month
				}
				myCalendar(param).then((res)=>{
					if(res.code==100000){
						console.log('日历',res)
						let calArr=[]
						res.data.forEach((item)=>{
							let newItem={
								date: item.date,
								type:item.state,
								info: item.state==0?'未打卡':(item.state==1?'未完成':'已完成')
							}
							calArr.push(newItem)
						})
						this.info.date = getDate(new Date(),-30).fullDate
						this.info.startDate = getDate(new Date(),-60).fullDate
						this.info.endDate =  getDate(new Date(),30).fullDate
						this.info.selected =calArr
					}
				})
			},
			change(e) {
				console.log('change 返回:', e)
				uni.setStorageSync('taskDate',e)
				uni.navigateBack({
					delta:1
				})
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// })
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
// 自定义导航栏
::v-deep .uni-navbar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
::v-deep .uni-navbar__content{
	background-color: transparent !important;
	border:none;
}
::v-deep .uni-navbar__header{
	background-color: transparent !important;
}
.bgBox{
	height:420rpx;
	position: relative;
	.bg{
		width:100%;
		height:100%;
	}
}
.tCalender{
	position: relative;
	z-index: 10;
	top:-200rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	.cMain{
		border-radius: 10rpx;
		background:#fff;
		padding: 10rpx;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, .15);
		::v-deep .uni-calendar-item__weeks-box-item{
			width:100%;
		}
		// ::v-deep .uni-calendar-item--extra{
		// 	color:$colorgreen;
		// }
		// ::v-deep .uni-calendar-item__weeks-box-circle{
		// 	background-color:$colorgreen;
		// }
		.dotTip{
			justify-content: flex-end;
			padding:0 20rpx 0 0;
			box-sizing: border-box;
			&>view{
				margin:0 0 0 30rpx;
			}
			text{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin:0 8rpx 0 0;
			}
			.bgGreen{
				background:$colorgreen;
			}
			.bgOrange{
				background:$colororange;
			}
			.bgRed{
				background:$colorred;
			}
		}
	}
}

</style>
